<template>
  <div class="teacher">
    <Header></Header>
    <div class="fa-chalkboard-teacher">
      <img src="../assets/img/back/teacherfengcai.png" style="width: 1200px" alt="">
      <div class="teacher3">
          <div class="tacher1">
            <img :src="teacher_list.image2" style="width: 420px;height: 450px" alt="">
            <div style="float: right" class="teacher2">
              <p>{{ teacher_list.name }}</p>
              <p>{{ teacher_list.title }}</p>
              <p>{{ teacher_list.brief }}</p>
            </div>
          </div>
          <div>
            <el-input  type="textarea"  :rows="3"  placeholder="请输入内容"  v-model="textarea"></el-input>
            <el-button  type="primary" plain class="btn1" @click="send">发表</el-button>
          </div>
        <div style="clear: both"></div>
          <div class="comment" >
          <div v-for="comment in this.comment_list"  class="text item">
              <div style="border-bottom: 1px slategray solid ;height: 80px;">
                   <p>匿名用户：</p>
                   <p style="text-indent: 20px">{{comment.content}}</p>
                   <p><span style="float: right">{{comment.create_time.replace('T',' ').slice(0,19)}}</span></p>
              </div>
            </div>
          </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "Teacher",
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      currentDate: new Date(),
      teacher_list: [],
      teacher_id:0,
      comment_list:[],
      textarea: '',
    }
  },

  methods:{
    send(){
      this.$http.post(`${this.$settings.base_url}course/commentadd/`,{
        content:this.textarea,
        teacher:this.teacher_id
          }
      ).then(response => {
        location. reload()
      })
    },
     get_teacher_id() {
      // 获取地址栏上面的课程ID
      this.teacher_id = this.$route.params.pk
      if (this.teacher_id < 1) {
        let _this = this;
        _this.$alert("对不起，teacher不存在！", "警告", {
          callback() {
            _this.$router.go(-1);
          }
        });
      }
    },
    get_teacher_data() {
      this.$http.get(`${this.$settings.base_url}course/teacher/${this.teacher_id}/`).then(response => {
        this.teacher_list = response.data;
        // console.log(this.teacher_list)
      }).catch(() => {
        this.$message({
          message: "对不起，访问页面出错！请联系客服工作人员！"
        });
      })
    },
    get_comment(){
       this.$http.get(`${this.$settings.base_url}course/comment/?teacher=${this.teacher_id}`).then(response => {
        this.comment_list = response.data;
        console.log(this.comment_list)
      }).catch(() => {
        this.$message({
          message: "对不起，访问页面出错！请联系客服工作人员！"
        });
      })
    }
  },
    created() {
    this.get_teacher_id();
    this.get_teacher_data();
    this.get_comment()
  },
}
</script>

<style scoped>

.fa-chalkboard-teacher {
  width: 1200px;
  margin: 0 auto;
}

.tacher1 {
  height: 500px;
  margin: 0 auto;
}

.teacher2 {
  width: 695px;
  margin: 0 auto;
}
.comment{
  background-color: #e4fffa;
}
.teacher3 {
  margin-top: 30px;
}
.btn1{
  float: right;
  margin-right: 40px;
  margin-bottom: 5px;
}
</style>